<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">美妆管理平台</div>

		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item layui-nav-itemed"><a class=""
						href="javascript:;">商品</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="190206.html">产品列表</a>
							</dd>
							<dd>
								<a href="addproduct.html">添加产品</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">解决方案</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;">列表一</a>
							</dd>
							<dd>
								<a href="javascript:;">列表二</a>
							</dd>
							<dd>
								<a href="">超链接</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="">云市场</a></li>
					<li class="layui-nav-item"><a href="">发布商品</a></li>
				</ul>
			</div>
		</div>

		<div class="layui-body" id="neirong">

			<form class="layui-form">
				<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
				<div class="layui-form-item">
					<label class="layui-form-label">产品名称</label>
					<div class="layui-input-block">
						<input type="text" name="name" placeholder="请输入"
							autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">下拉列表</label>
					<div class="layui-input-block">
						<select name="type" lay-verify="required" id="type">
							<!-- <option value=""></option>
							<option value="0">北京</option>
							<option value="1">上海</option>
							<option value="2">广州</option>
							<option value="3">深圳</option>
							<option value="4">杭州</option> -->
						</select>
					</div>
				</div>


				<div class="layui-form-item">
					<label class="layui-form-label">产品图片</label>
					<div class="layui-input-block">
						<button type="button" class="layui-btn" id="test1">
							<i class="layui-icon">&#xe67c;</i>上传图片
						</button>

						<span id="imgname"></span>
					</div>
				</div>





				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="sub">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
				<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
			</form>


		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			© layui.com - 底部固定区域
		</div>
	</div>
	<script src="../res/layui/layui.js"></script>

	<script src="../res/static/js/jquery-1.8.2.js"></script>
	<script>
		//JavaScript代码区域
		
		$(function(){
			$.ajax({

				url: "../type/query",
				type:"post",
				data: {
					
				},
				success: function(res) {
					var $select = $("#type");//下拉菜单
					for (var i=0;i<res.data.length;i++){
						$select.append("<option value='"+res.data[i].id+"'>"+res.data[i].name+"</option>");
					}
				}
			});
		});
		
		

		layui.use([ 'form', 'upload', 'layer' ], function() {

			//各种基于事件的操作，下面会有进一步介绍

			var upload = layui.upload;
			var $ = layui.$;//jquery对象
			//执行实例
			var uploadInst = upload.render({
				elem : '#test1' //绑定元素
				,
				method : 'post',
				url : '../upload' //上传接口
				,
				done : function(res) {
					//上传完毕回调
					console.log(res);

					if (res.code == 0) {
						/* $("#test1").val(res.data); */
						$("#imgname").html(res.data);
					}
				},
				error : function() {
					//请求异常回调
					console.log(res);
				}
			});

			var form = layui.form;
			var layer = layui.layer;

			//submit 提交事件
			form.on('submit(sub)', function(data) {

				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				data.field.img = $("#imgname").html();

				$.ajax({

					url : "../addproduct",
					type : "get",
					data : data.field,
					success : function(res) {
						layer.msg(res.data.name + res.msg);
					}
				});

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		});
	</script>




</body>
</html>



